import { initShaders } from '@/lib/webgl'
export default function (el, vertexDatas, vertexCount) {
    const styles = window.getComputedStyle(el, null)
    el.width = parseInt(styles.width)
    el.height = parseInt(styles.height)
    const gl = el.getContext('webgl2')

    // 顶点着色器
    const VSHADER_SOURCE = `
        attribute vec4 a_Position;
        attribute vec2 a_TexCoord;
        varying vec2 v_TexCoord;
        void main() {
            gl_Position = a_Position;
            v_TexCoord = a_TexCoord;
        }
    `
    const FSHADER_SOURCE = `
        precision mediump float;
        uniform sampler2D u_Sampler;
        varying vec2 v_TexCoord;
        void main() {
            gl_FragColor = texture2D(u_Sampler, v_TexCoord);
        }
    `
    return new Promise((resolve) => {
        if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
            console.log('init shader error')
            resolve(null)
        }
        const initVertexBuffers = (gl) => {
            const vertices = new Float32Array(vertexDatas)
            const n = vertexCount
            // 创建缓冲区
            const verticesBuffer = gl.createBuffer()
            if (!verticesBuffer) {
                return -1
            }
            // 将缓冲区对象绑定到目标
            gl.bindBuffer(gl.ARRAY_BUFFER, verticesBuffer)
            // 向缓冲区对象中写入数据
            gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW)
            const eleSize = vertices.BYTES_PER_ELEMENT
            const aPosition = gl.getAttribLocation(gl.program, 'a_Position')
            // 将缓冲区对象分配给attribute变量
            gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 4 * eleSize, 0)
            // 连接a_Position变量与分配给它的缓冲区对象
            gl.enableVertexAttribArray(aPosition)
            const aTexCoord = gl.getAttribLocation(gl.program, 'a_TexCoord')
            gl.vertexAttribPointer(aTexCoord, 2, gl.FLOAT, false, 4 * eleSize, 2 * eleSize)
            gl.enableVertexAttribArray(aTexCoord)
            return n
        }

        const initTextures = (gl, n) => {
            const texture = gl.createTexture()
            const uSampler = gl.getUniformLocation(gl.program, 'u_Sampler')
            const image = new Image()
            image.onload = function () {
                loadTexture(gl, n, texture, uSampler, image)
            }
            image.src = /(localhost|192\.168)/.test(location.origin) ? './logo.jpg' : 'https://bravelin.top/public/client/logo.jpg'
            return true
        }
        const loadTexture = (gl, n, texture, uSampler, image) => {
            gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1)
            gl.activeTexture(gl.TEXTURE0)
            gl.bindTexture(gl.TEXTURE_2D, texture)
            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR)
            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image)
            gl.uniform1i(uSampler, 0)

            gl.clearColor(0.0, 0.0, 0.0, 1.0)
            gl.clear(gl.COLOR_BUFFER_BIT)
            gl.drawArrays(gl.TRIANGLE_STRIP, 0, n)
            resolve(el.toDataURL('image/png'))
        }
        // 设置顶点位置
        const n = initVertexBuffers(gl)
        if (n < 0) {
            console.log('initVertexBuffers failed')
            resolve(null)
        }
        if (!initTextures(gl, n)) {
            console.log('initTextures failed')
            resolve(null)
        }
    })
}